import './App6.css'//css要写在最上面
import '@ant-design/v5-patch-for-react-19';
import { render } from '@testing-library/react';
import { Input, Space, Table, Tag, Popconfirm } from 'antd';
import { useEffect, useRef, useState } from 'react';
const { Search } = Input;

function App() {

    const [dataSource, setData] = useState([]);
    const [update, setUpdate] = useState(1);
    const inputRef = useRef(null);

    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: "操作",
            dataIndex: 'do',
            key: 'do',
            render: (a, item) => (
                <Space size='middle'>
                    <Popconfirm
                        title='确认删除吗？'
                        okText="确定"
                        cancelText="取消"
                        onConfirm={() => { onDelete(item.id) }}
                    >
                        <a href="#">delete</a>
                    </Popconfirm>
                </Space>
            )
        }
    ];

    function getData() {
        fetch(`http://localhost:3001/data`, {
            method: 'get'
        }).then(res => {
            return res.json();
        }).then((data) => {
            // dataSource = data;
            setData(data);
        })
    }

    useEffect(() => {
        getData()
    }, [update])

    function onDelete(id) {
        fetch(`http://localhost:3001/data/${id}`, {
            method: 'delete'
        }).then((res) => {
            // return res.json();
            // setUpdate(++num);
            setUpdate(update + 1);
        })
    }

    function onSearch(name) {
        // let name = inputRef.current.input.value;
        // console.log(name);

        fetch(`http://localhost:3001/data?name=${name}`, {
            method: 'get'
        }).then((res) => {
            return res.json();
        }).then((data) => {
            setData(data);
        })
    }
    return (
        <div className="container">
            <div className="search-box">
                <Search
                    placeholder='请输入关键词'
                    enterButton="搜索"
                    allowClear
                    size='large'
                    onSearch={onSearch}
                    // onChange={() => { onSearch() }}
                    ref={inputRef}
                />
                <Table
                    dataSource={dataSource}
                    columns={columns}
                />
            </div>
        </div>
    )
}
export default App;